<template>
  <div>
    <table border="1" width="700" style="border-collapse: collapse">
      <caption>
        购物车
      </caption>
      <thead>
        <tr>
          <th>
            <input type="checkbox" v-model="isArr" /> <span>全选</span>
          </th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr is='Tr' v-for="(obj,index) in goodList" :key="index" :obj='obj' :index="index" @adds='addfn' @els='elfn'
          @shanchu='shan'>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>合计:</td>
          <td colspan="5">
            {{hr}}
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
  import Tr from "./components/zuoye1"
  export default {
    data() {
      return {
        goodList: [{
            name: "诸葛亮",
            price: 1000,
            num: 1,
            checked: false,
          },
          {
            name: "蔡文姬",
            price: 1500,
            num: 1,
            checked: false,
          },
          {
            name: "妲己",
            price: 2000,
            num: 1,
            checked: false,
          },
          {
            name: "鲁班",
            price: 2200,
            num: 1,
            checked: false,
          },
        ],
      };
    },
    components: {
      Tr,
    },
    methods: {
      addfn(index) {
        this.goodList[index].num++;
      },
      elfn(index) {
        this.goodList[index].num--;
      },
      shan(index) {
        this.goodList.splice(index, 1)
      }
    },
    computed: {
      isArr: {
        set(val) {
          this.goodList.forEach(obj => obj.checked = val)
        },
        get() {
          return this.goodList.every(val => val.checked)
        }
      },
      hr() {
        return this.goodList.filter(val => val.checked).reduce((sum, val) => sum += val.price, 0)
      }
    }
  };
</script>

<style>
</style>